<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="80">
			
			<FormItem class="w-50" label="省*">
				<Select  v-model="houseSellVo.provienceId" style="width:150px" @on-change="searchCity(houseSellVo.provienceId)" transfer>
				        <Option v-for="item in proviences" :key="item.srId" :value="item.srId" transfer>{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="市*">
				<Select v-model="houseSellVo.cityId" style="width:150px" @on-change="searchRegin(houseSellVo.cityId)">
				        <Option  v-for="item in citys" :key="item.srId" :value="item.srId">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="区*">
				<Select v-model="houseSellVo.reignId" style="width:150px" >
				        <Option  v-for="item in regins" :key="item.srId" :value="item.srId">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="小区">
				<Input v-model="houseSellVo.xiaoqu" placeholder="请输入小区"></Input>
			</FormItem>
			<FormItem class="w-50" label="片区">
				<Input v-model="houseSellVo.pianqu" placeholder="请输入片区"></Input>
			</FormItem>
			<FormItem class="w-50" label="楼层">
				<Select v-model="houseSellVo.louceng" style="width:150px">
				        <Option  v-for="item in floors" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="装修">
				<Select v-model="houseSellVo.zhuangxiu" style="width:150px">
				        <Option  v-for="item in repairs" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="朝向">
				<Select v-model="houseSellVo.chaoxiang" style="width:150px">
				        <Option  v-for="item in faces" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="电梯">
				<Select v-model="houseSellVo.dianti" style="width:150px">
				        <Option  v-for="item in lifts" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			</Col>
			
			<FormItem class="w-50" label="户型">
				<Input v-model="houseSellVo.roomCount" />
			</FormItem>
			
			<FormItem class="w-50" label="产权类型">
			<el-select v-model="houseSellVo.propertType"  clearable placeholder="请输入产权类型" size="small" style="width: 200px;margin-right: 20px;"
			 @change="search">
				 <el-option
				   v-for="item in options"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				 </el-option>
			</el-select>
			</FormItem>
			<FormItem class="w-50" label="年代">
				<Input v-model="houseSellVo.niandai" placeholder="请输入房子年代"></Input>
			</FormItem>
			<FormItem class="w-50" label="房子总价">
				<Input v-model="houseSellVo.totalPrice" placeholder="请输入房子总价"></Input>
			</FormItem>
			
			<FormItem class="w-50" label="封面图片上传">
				<div v-if="houseSellVo.imgUrl != ''">
				  <img
				    :src="houseSellVo.imgUrl"
				    style="width:180px;height:120px"
				  />
				  <div class="demo-upload-list-cover">
				    <Icon
				      type="ios-trash-outline"
				      @click.native="handleRemove"
				    ></Icon>
				  </div>
				</div>
				<Upload
				  with-credentials
				  :max-size="2048"
				  :show-upload-list="false"
				  name="file"
				  ref="upload"
				  :format="['jpg', 'jpeg', 'png']"
				  :data="{ module: 'house', date: new Date() }"
				  :on-format-error="handleFormatError"
				  :on-exceeded-size="handleMaxSize"
				  :on-success="handleSuccess"
				  :action="url"
				>
				  <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
				    >Upload files</Button
				  >
				</Upload>
			</FormItem>
			<FormItem class="w-50" label="多图片上传">
				<div v-if="imgUrlList != ''" v-for="(item,index) in imgUrlList" :key="index">
				  <img
				    :src="imgUrlList[index].imgUrl"
				    style="width:180px;height:120px;display: inline-block;"
				  />
				  <div class="demo-upload-list-cover">
				    <Icon
				      type="ios-trash-outline"
				      @click.native="handleListRemove()"
				    ></Icon>
					
				  </div>
				</div>
				<Upload
				  with-credentials
				  :max-size="2048"
				  :show-upload-list="false"
				  name="file"
				  ref="upload"
				  multiple
				  type="drag"
				  :format="['jpg', 'jpeg', 'png']"
				  :data="{ module: 'car', date: new Date() }"
				  :on-format-error="handleFormatError"
				  :on-exceeded-size="handleMaxSize"
				  :on-success="handleListSuccess"
				  :action="url"
				   style="display: inline-block;width:58px;"
				>
				  <div style="width: 58px;height:58px;line-height: 58px;">
				              <Icon type="ios-camera" size="20"></Icon>
				          </div>
				</Upload>
			</FormItem>
			
			<FormItem class="text-right"> 
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="cancel" class="ml-2">取消</Button>
			</FormItem>
		</Form>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				iport:'',
				url:'',
				proviences : [],
				citys : [],
				regins : [],
				search: "",
				imgUrlList:[],
				imgList:[],
				img:'',
				imgs:'',
				 options: [{
				          value: '1',
				          label: '军产'
				        }, {
				          value: '2',
				          label: '国产'
				        }, {
				          value: '3',
				          label: '地产'
				        },
						{
							value: 4,
							label: '公寓'
						},
						{
							value: 5,
							label: '公建'
						},
						{
							value: 6,
							label: '商铺'
						},
						],
				roomCounts:[
						{value:1,label:'一室'},
						{value:2,label:'二室'},
						{value:3,label:'三室'},
						{value:4,label:'四室'},
						{value:5,label:'五室以上'},
						{value:6,label:'上跃'},
						{value:7,label:'下跃'},
						{value:8,label:'别墅'}
					],
					floors:[
						{value:'高',label:'高'},
						{value:'中',label:'中'},
						{value:'低',label:'低'},
						{value:'多层',label:'多层'},
						{value:'小高层',label:'小高层'},
						{value:'高层',label:'高层'},
					],
					faces:[
						{value:'南北',label:'南北'},
						{value:'东西',label:'东西'},
						{value:'其他',label:'其他'}
					],
					repairs:[
						{value:'清水',label:'清水'},
						{value:'简装',label:'简装'},
						{value:'精装',label:'精装'},
						{value:'豪装',label:'豪装'}
					],
					lifts:[
						{value:1,label:'有'},
						{value:2,label:'无'}
					],
				houseSellVo: {	
					sellId:0,
					area: "",
					roomCount: "",
					provienceId: "",
					cityId: "",
					reignId: "",
					imgUrl: "",
					xiaoqu:'',
					painqu:'',
					zhuangxiu:'',
					chaoxiang:'',
					louceng:'',
					duanti:'',
					niandai:'',
					totalPrice:'',
					personName:'',
					tel:'',
					wxNumber:'',
				},
			}
		},
		created: function() {
			this.iport = this.store.state.iport
			this.url = this.iport + 'image/upload'
			this.$data.houseSellVo.sellId = this.$route.params.sellId;
			this.init();
			this.searchImg()
			this.searchProvience();
			this.searchCity()
			this.searchRegin()
		},
		methods: {
			//图片上传时文件格式错误方法
			handleFormatError(file) {
			  this.$Notice.warning({
			    title: '文件格式不正确',
			    desc:
			      '文件 ' +
			      file.name +
			      ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
			  })
			},
			//校验图片的大小，不能大于2M
			handleMaxSize: function(file) {
			  this.$Modal.info({
			    title: '超出文件大小限制',
			    content: '文件 ' + file.name + ' 太大，不能超过 2M。',
			  })
			},
			handleRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.houseSellVo.imgUrl = ''
			},
			//上传成功后的勾子 
			handleSuccess: function(response, file, fileList) {
				
			  this.$data.houseSellVo.imgUrl = response.DATA.URL
			  console.log( this.$data.houseSellVo.imgUrl)
			},
			handleListRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.imgUrlList = []
			},
			//上传成功后的勾子 
			handleListSuccess: function(response, file, fileList) {
				this.$data.imgs = response.DATA.URL
			  var img = {}
			  img.houseId = this.$data.houseSellVo.sellId
			  img.imgUrl = this.$data.imgs
			  console.log(img)
			  this.$data.imgUrlList.unshift(img)
			  },
			
			
			
			
			searchSysVo : function(provienceId,cityId,reignId){
				let self = this
				this.http.get({
					url : "/sysvo/info",
					param : {
						provienceId: provienceId,
						cityId: cityId,
						reignId: reignId
					}
				}).then(data => {
					self.$data.shengname = data.shengname;
					self.$data.shiname = data.shiname;
					self.$data.zongname = data.zongname;
				})
			},
			searchRegin : function(srId){
				let self = this
				this.http.get({
					url : "sys-region/list",
					param : {
						parentId : srId
					}
				}).then(data => {
					self.$data.regins = data;
				})
			},
			searchCity : function(srId){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId : srId
					}
				}).then(data => {
					self.$data.citys = data
				});
			},
			searchProvience : function(){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId : 0
					}
				}).then(data => {
					self.$data.proviences = data;
				});
			},
			change : function(){
				
			},
			submit: function() {
				this.cancelImg()
				if (this.$data.houseSellVo.totalPrice === null) {
					this.message.error("总价必须输入必须输入");
					return;
				}				
				if("军产" == this.$data.houseSellVo.propertType){
					this.$data.houseSellVo.propertType = 1					  
				}
				if("国产" == this.$data.houseSellVo.propertType){
					this.$data.houseSellVo.propertType = 2					  
				}
				if("地产" == this.$data.houseSellVo.propertType){
					this.$data.houseSellVo.propertType = 3					 
				}				
				let self = this;
				this.http.put({
					url: "house-sell/info",
					param: this.$data.houseSellVo
				}).then(data => {
					self.message.info("修改成功");
					this.updataImg()
					this.$tabs.close();
					this.$router.push({
						name : "houseSell"
					})
				});
			},
			updataImg: function(){
				var imgs = []
				for(var i = 0;i<this.$data.imgUrlList.length;i++){
					imgs.unshift(this.$data.imgUrlList[i].imgUrl)
				}
				var imgString = imgs.toString()
				this.http.put({
					url:'http://localhost:443/lanniao-user/house/image/upload',
					param:{
						sellAndLeaseId:this.$data.houseSellVo.sellId,
						type:1,
						images:imgString
					}
				}).then(data => {
					console.log("shangchuanl")
				})
			},
			searchImg:function(){
				this.http.get({
					url:'http://localhost:443/lanniao-user/house/image/list',
					param:{
						houseAndLeaseId:this.$data.houseSellVo.sellId,
						type:1,
					}
				}).then(data => {
					this.$data.imgUrlList = data
					console.log(data)
				})
			},
			cancelImg:function(){
				this.http.delete({
					url:'http://localhost:443/lanniao-user/house/image/remove',
					param:{
						houseAndLeaseId:this.$data.houseSellVo.sellId,
						type:1,
					}
				}).then(data => {
					
					console.log("55")
				})
			},
			
			
			init: function() {			
				let self = this;
				this.http.get({
					url: "/house-sell-client-vo/info",
					param: {
						sellId: this.$data.houseSellVo.sellId,
						
					}
				}).then(data => {
					console.log("aaaaaaa")
					console.log(data)
					this.searchCity(data.provienceId)
					this.searchRegin(data.cityId)
					if(1 == data.propertType){
						data.propertType = "军产"
						 self.$data.houseSellVo = data;
					}
					if(2 == data.propertType){
						data.propertType = "国产"
						 self.$data.houseSellVo = data;	
					}
					if(3 == data.propertType){
						data.propertType = "地产"
						 self.$data.houseSellVo = data;	
					}
					console.log(data.cityId);
					// this.searchSysVo(data.provienceId,data.cityId,data.reignId);
				});				 			 
			},
			cancel: function() {
				this.$tabs.close();
			}
		}
	}
</script>
 
<style>
</style>
